<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" charset="utf-8" />
	<title>Yes paper</title>
	<link rel="stylesheet" type="text/css" href="indexpage/css/style.css"/>
	<link rel="stylesheet" type="text/css" href="indexpage/css/style2.css"/>
	<link rel="stylesheet" type="text/css" href="indexpage/css/style3.css"/>
	<link rel="stylesheet" type="text/css" href="indexpage/css/style4.css"/>
	<link rel="stylesheet" href="signuppage/css/register.css"/>
	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
	<link rel="stylesheet" href="personalpage/css/style.css">
	<script src="utils/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="utils/js/request.js" type="text/javascript" charset="utf-8"></script>
	<link rel="Shortcut Icon" href="utils/img/logo.ico" type="image/x-icon"/>
	<script type="text/javascript">
		//show and side login box
		function login(){
			if(document.getElementById("box2").style.display!="block")
				document.getElementById("box2").style.display="block";
			else
				document.getElementById("box2").style.display="none";
		}
		//goto register page
		function jump(){
			window.location.href="/register";
		}
	</script>
</head>
<body>
<div id="main">
	<!--	The top navigation bar-->
	<div class="top">
		<div style="display:flex; flex:1; justify-content:flex-start;">
			<div style="width: 250px; height: 50px; display: flex; align-items: center; justify-content: center;">
				<img src="indexpage/img/logo.png" style="width: 250px; height: 70px;"/>
			</div>
			<div class="topButton">
				<button type="button" class="login" onclick="location.href='/personal'">My articles</button>
			</div>
		</div>
		<div style="display:flex; flex:1; justify-content:flex-end;">
			<!--search box-->
			<div class="topButton" style="display: flex; justify-content: center; align-items: center;">
				<form id="get_form">
					<input v-model="content" type="text" placeholder="Search" style="margin: 0; padding: 0; height: 25px;"/>
					<button type="button" @click="searchEvent" name="" style="margin: 0; padding: 0; height: 25px; width: 25px; border-radius: 20%; background-image: url(indexpage/img/search.jpg); background-size: contain; cursor: pointer;">.</button>
				</form>
			</div>
			<div id="box" class="topButton">
				<div id="box1" class="login" type="button" onclick="login()">Log in</div>
				<!--log in box-->
				<div id="box2" style="height: 250px">
					<div class="login-box">
						<form method="post" action="/login">
							<div class="user-box">
								<input type="text" name="username" required="" autocomplete="off">
								<label>Username</label>
							</div>
							<div class="user-box">
								<input type="password" name="password" required="">
								<label>Password</label>
							</div>
							<button type="submit" style="position: relative;background-color:#000000;margin-left: 0px;margin-top: 20px">
								<span></span>
								<span></span>
								<span></span>
								<span></span>
								Submit
							</button>
						</form>
					</div>
				</div>
			</div>
			<div class="topButton">
				<button type="button" class="login" onclick="jump()">Register</button>
			</div>
		</div>
	</div>
	<!--image slider-->
	<div style="width: 100%; height: 750px; background-color: #000000; background-image: url('indexpage/img/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center;">
		<div id="inner" >
			<ul id="pic">
				<li><a herf="#"><img src="indexpage/img/2.jpg" alt=""></a></li>
				<li><a herf="#"><img src="indexpage/img/3.jpg" alt=""></a></li>
				<li><a herf="#"><img src="indexpage/img/4.jpg" alt=""></a></li>
			</ul>
			<div id="arr">
				<span id="left" > <</span>
				<span id="right">></span>
			</div>
		</div>
	</div>

	<!-- reviewers information -->
	<div id="au" class="authorinfo_back" style="align-items: center;">
		<div class="demo">
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-sm-6">
						<div class="box">
							<div class="box-img">
								<img src="indexpage/img/author1.jpg" alt="">
							</div>
							<div class="box-content">
								<h4 class="title">Ansgar Korf</h4>
								<p class="description">
									Institution :<br>
									Bruker Corporation<br>
									Department :<br>
									Bioinformatics<br>
									Skills :<br>
									Liquid ChromatographyMass</p>
							</div>
						</div>
					</div>

					<div class="col-md-4 col-sm-6">
						<div class="box">
							<div class="box-img">
								<img src="indexpage/img/author2.jpg" alt="">
							</div>
							<div class="box-content">
								<h4 class="title">Ansgar Schleicher</h4>
								<p class="description">
									Institution : <br>
									DSA GmbH<br>
									Department :<br>
									Geschäftsführung<br>
									Skills :<br>
									Software Engineering</p>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="box">
							<div class="box-img">
								<img src="indexpage/img/author3.jpg" alt="">
							</div>
							<div class="box-content">
								<h4 class="title">Udrea Diana</h4>
								<p class="description">
									Institution :<br>
									National College<br>
									Department :<br>
									IT<br>
									Skills :<br>
									Data Science</p>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="box">
							<div class="box-img">
								<img src="indexpage/img/author4.jpg" alt="">
							</div>
							<div class="box-content">
								<h4 class="title">Erica Mikelson</h4>
								<p class="description">
									Institution :<br>
									Virginia Commonwealth University<br>
									Department :<br>
									Decision analytics<br>
									Skills :<br>
									Machine Learning</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Reviewer title -->
		<div style="position: relative; color: #ffffff; width: 100%; height: 300px; text-align: center; justify-content: center; align-items: center;">
			<div style="position: relative; font-size: xx-large; color: #ffffff; width: 100%; top: 90px;">Reviewers information</div>
			<h5 style="position: relative; color: #ffffff; top: 110px;">Authoritative and professional reviewers</h5>
		</div>
	</div>
	<!-- Articles classification	 -->
	<div class="course-list">
		<ul class="honeycomb" lang="es" style="margin-top: 50px;">
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s3.jpg">
				<div class="honeycomb-cell_title" @click="setType('Artificial intelligence')">Artificial Intelligence</div>
			</li>
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s2.jpg">
				<div class="honeycomb-cell_title" @click="setType('Big data')">Big Data</div>
			</li>
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s5.jpg">
				<div class="honeycomb-cell_title" @click="setType('Computer security')">Computer Security</div>
			</li>
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s4.jpg">
				<div class="honeycomb-cell_title" @click="setType('Programming language')">Programming Language</div>
			</li>
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s1.jpg">
				<div class="honeycomb-cell_title" @click="setType('Cloud computing')">Cloud Computing</div>
			</li>
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s6.jpg">
				<div class="honeycomb-cell_title" @click="setType('Database')">Database</div>
			</li>
			<li class="honeycomb-cell">
				<img class="honeycomb-cell_image" src="indexpage/img/s7.webp">
				<div class="honeycomb-cell_title" @click="setType('Internet of things')">Internet of Things</div>
			</li>
			<li class="honeycomb-cell honeycomb_placeholder"></li>
		</ul>
	</div>
	<!--footer-->
	<footer class="footer">
		<hr />
		<br />
		<p>CopyRight@copy2021: <a href="#"> YESPAPER </a> ALL RIGHT RESERVED</p>
		<p>Contact information: </p>
		<div class="social-btns">
			<a id="i1" class="btn wechat" href="#" ><i class="fa fa-wechat"></i></a>
			<a id="i2" class="btn qq" href="#"><i class="fa fa-qq"></i></a>
			<a id="i3" class="btn weibo" href="#"><i class="fa fa-weibo"></i></a>
			<div id="iBox1" style="height: 150px;top: 70px;position: absolute;width: 150px;right: 350px;"><img src="personalpage/img/wechat.jpg" alt="img"></div>
			<div id="iBox2" style="height: 150px;top: 70px;position: absolute;width: 150px;right: 350px;"><img src="personalpage/img/QQ.jpg" alt="img"></div>
			<div id="iBox3" style="height: 150px;top: 70px;position: absolute;width: 150px;right: 350px;"><img src="personalpage/img/wechat.jpg" alt="img"></div>
		</div>
	</footer>
</div>
<script type="text/javascript">
	//image slider methods
	window.onload = function (){
		var inner=document.getElementById("inner");
		var ulObj=document.getElementById("pic");
		var list=ulObj.getElementsByTagName("li");
		var arr=document.getElementById("arr");
		console.log(list)
		var index=0;
		var timer=null;
		timer=setInterval(autoPlay,1500);
		inner.onmouseover=function(){
			arr.style.display="block";
			clearInterval(timer);
		};
		inner.onmouseout=function(){
			arr.style.display="none";
			timer=setInterval(autoPlay,1500);
		};
		left.onclick=function () {
			if (index==0)
				index=list.length;
			for(var i=0;i<list.length;++i)
				list[i].style.display="none";
			index=index-1;
			list[index].style.display="block";
		};
		right.onclick=function () {
			if (index == list.length - 1)
				index=-1;
			for(var i=0;i<list.length;++i)
				list[i].style.display="none";
			index=index+1;
			list[index].style.display="block";
		};
		function autoPlay() {
			if (++index >= list.length)
				index = 0;
			for(var i=0;i<list.length;++i)
				list[i].style.display="none";
			list[index].style.display="block";
		}
		var i1=document.getElementById("i1");
		var iBox1=document.getElementById("iBox1");
		iBox1.style.display="none";
		i1.onmouseover=function(){
			iBox1.style.display="block";
		};
		i1.onmouseout=function(){
			iBox1.style.display="none";
		};

		var i2=document.getElementById("i2");
		var iBox2=document.getElementById("iBox2");
		iBox2.style.display="none";
		i2.onmouseover=function(){
			iBox2.style.display="block";
		};
		i2.onmouseout=function(){
			iBox2.style.display="none";
		};

		var i3=document.getElementById("i3");
		var iBox3=document.getElementById("iBox3");
		iBox3.style.display="none";
		i3.onmouseover=function(){
			iBox3.style.display="block";
		};
		i3.onmouseout=function(){
			iBox3.style.display="none";
		};
		var error = '[[${message}]]';
		if(error!=""){
			alert(error);
		}
	}

</script>
</body>

<script type="text/javascript">
	let main = new Vue({
		el:"#main",
		data:{
			id:'',
			author:'',
			title:'',
			address:'',
			reviewer:'',
			date:'',
			state:'',
			keyword:'',
			abstracts:'',
			type:'',
			papers: [],
			content: '',
			classification: '',
			positions:['Reviewer', 'Writer','University'],
			choosePosition:''
		},
		methods: {
			//search request
			searchEvent: function (){
				// console.log(this.content);
				this.dataRequest("/search", "post",
						[{name:"content",value:this.content},{name:"type",value:""}]);
				window.location.href ="/searchpage";
			},
			//search request by clicking article classification
			setType: function(type){
				this.classification = type;
				this.dataRequest("/search", "post",
						[{name:"content",value:""},{name:"type",value:this.classification}]);
				window.location.href ="/searchpage";
			},
			aEvent: function () {
				var returnValue = this.dataRequest("/getall", "post", [{name:"aaa",value:"asdas"}]);
				if (returnValue.code) {
					this.papers = returnValue.papers;
					console.log(this.papers);
				} else {
					// return homepage
					window.location.href = "/";
				}
			},
			dataRequest(url, method, data) {
				/*data package*/
				var fd = new FormData();
				for(var i=0;i<data.length;i++){
					fd.append(data[i].name, data[i].value);
				}
				/*send data*/
				var xhr = new XMLHttpRequest();
				let ret = false;
				xhr.onreadystatechange= function() {
					if (xhr.readyState == 4) {
						if (xhr.status == 200 || xhr.status == 304) {
							// ret = JSON.parse(xhr.responseText);
						}
					}
				}
				xhr.open(method, url, false);
				xhr.send(fd);
				// return ret;
			}
		}
	})
</script>
</html>